<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>条件搜索</span>
        <div class="base-el-float-right">
          <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
          </el-button-group>
        </div>
      </div>
      <el-form ref="ruleForm" :inline="true" :model="formInline">
        <el-form-item label="用户名称:">
          <el-input v-model="formInline.nickname" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="会员等级:">
          <el-select v-model="formInline.vip_id">
            <el-option v-for="item of vipLevelData" :key="item._id" :label="`${item.description}(${item.discount}折)`" :value="item._id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 产品列表 -->
    <el-card class="base-el-card-bottom">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
        <el-button class="base-el-float-right" type="primary" icon="el-icon-refresh" @click="submitForm">刷新</el-button>
      </div>
      <PaginationTable
        :table-data="tableData"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @handleChange="handleTableSizeChange"
      >
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="头像">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" />
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" />
        <el-table-column label="手机" prop="phone" />
        <el-table-column label="会员等级">
          <template slot-scope="scope">
            <el-tag>{{ vipLevel(scope.row.vip_id) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="注册时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | timeFormatFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleEdit(scope.row)">设置会员等级</el-link><br>
          </template>
        </el-table-column>
      </PaginationTable>

      <el-dialog title="编辑会员等级" :show-close="false" :visible="dialogVisible">
        <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="100px">
          <el-form-item label="会员等级" prop="vip_id">
            <el-select v-model="dataForm.vip_id">
              <el-option v-for="item of vipLevelData" :key="item._id" :label="`${item.description}(${item.discount}折)`" :value="item._id" />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="doEdit">确认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>

import PaginationTable from '@/components/PaginationTable'
import { queryByCondition, updateById } from '@/api/commoncrud'
const defaultFormInline = {
  nickname: '',
  vip_id: ''
}
export default {
  name: 'User',
  components: { PaginationTable },
  data() {
    return {
      vipLevelData: [],
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,

      formInline: {
        ...defaultFormInline
      },

      dataForm: {
        vip_id: ''
      },
      rules: {
        vip_id: [{ required: true, trigger: 'blur', message: '请选择vip类型' }]
      },

      dialogVisible: false
    }
  },
  async created() {
    await this.fetchVipLevelData()
    await this.fetchData()
  },
  methods: {
    async fetchData() {
      const query = { sort: { createTime: -1 }}
      Object.keys(this.formInline).forEach(key => {
        if (this.formInline[key]) { query[key] = this.formInline[key] }
      })
      if (query.nickname) query.nickname = { $regex: query.nickname }
      const res = await queryByCondition('userbase', (this.currentPage - 1) * this.pageSize, this.pageSize, query)
      this.tableData = res.data.documentList
      this.total = res.data.documentCount
    },
    async fetchVipLevelData() {
      const res = await queryByCondition('viplevel', 0, 100, { })
      this.vipLevelData = res.data.documentList
    },
    handleEdit(userData) {
      this.dataForm = { _id: userData._id, vip_id: userData.vipId }
      this.dialogVisible = true
    },
    handleClose() {
      this.dataForm = {
        vip_id: ''
      }
      this.dialogVisible = false
    },
    vipLevel(value) {
      const vipData = this.vipLevelData.find(v => v._id === value)
      return vipData ? vipData.description : '暂无会员信息'
    },
    async doEdit() {
      this.$refs['dataForm'].validate(async validate => {
        if (validate) {
          await updateById('userbase', this.dataForm._id, { vip_id: this.dataForm.vip_id })
          this.handleClose()
          this.$message.success('操作成功!')
          await this.fetchData()
        }
      })
    },

    // 表格数据
    async resetForm() {
      this.formInline = {
        ...defaultFormInline
      }
      this.currentPage = 1
      await this.fetchData()
    },
    async handleTableSizeChange({ currentPage, pageSize }) {
      this.pageSize = pageSize
      this.currentPage = currentPage
      await this.fetchData()
    },
    async submitForm() {
      this.currentPage = 1
      await this.fetchData()
    }
  }
}
</script>

<style scoped>
</style>
